<template>
  <div class="House">
    <div class="head">
      <van-nav-bar title="房屋认证" left-text="返回" left-arrow @click-left="onClickLeft" />
    </div>
    <div class="cocess">
      <van-steps :active="active" active-icon="success" active-color="#38f">
        <van-step>填写户主名</van-step>
        <van-step>填写预留电话号码</van-step>
        <van-step>验证成功</van-step>
      </van-steps>
    </div>
    <div class="contain">
      <!-- 输入任意文本 -->
      <van-field v-model="text" label="户主名"  placeholder="请输入户主名" />
      <!-- 输入手机号，调起手机号键盘 -->
      <van-field v-model="tel" type="tel" label="手机号" placeholder="请输入预留电话号码" />
    </div>
    <van-button plain type="info" @click="confirm">认证</van-button>
  </div>
</template>

<script>
import Vue from 'vue'
import { NavBar, Step, Steps, Field, Button, Toast } from 'vant'
Vue.use(NavBar).use(Step).use(Steps).use(Field).use(Button).use(Toast)
export default{
  name: 'House',
  data () {
    return {
      active: 0,
      tel: '',
      text: ''
    }
  },
  methods: {
    // 返回首页
    onClickLeft () {
      this.$router.push('/Myself')
    },
    confirm () {
      if (this.tel.length === 11 && this.text === '李兆鹏' && this.tel === '15702095406') {
        this.active = 2
        Toast('认证成功')
        setTimeout(() => {
          this.tel = ''
          this.text = ''
          this.active = 0
        }, 1000)
      } else if (this.tel.length !== 11 && this.text !== '') {
        this.tel = ''
        Toast('手机号码格式错误')
      } else if (this.text !== '李兆鹏') {
        Toast('暂无相关户主')
      } else {
        Toast('请输入相关内容')
      }
    }
  },
  watch: {
    tel (text, tel) {
      if (this.tel !== '' && text !== '') {
        this.active = 1
      }
    }
  }
}
</script>

<style scoped>

</style>
